{extend name="/layout" /}

{block name="title"}图片管理{/block}

{block name="style"}
<link rel="stylesheet" type="text/css" href="/static/backend/css/page.css">

<style>
    body {
        background-color: white !important;
    }

    #img-page {
        width: 100%;
        text-align: center;
        margin-top: 10px;
    }

    .file-box {
        float: left;
        width: 132px;
    }

    .filename {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .file-name small {
        color: #676a6c;
    }

    .file-box .file {
        border: 1px solid #e7eaec;
        padding: 0;
        background-color: #ffffff;
        position: relative;
        margin: 5px;
    }

    .file .icon, .file .image {
        height: 120px;
        overflow: hidden;
        text-align: center;
    }

    .file .image > img {
        /*vertical-align: middle;*/
        /*display: block;*/
        max-width: 100%;
        height: auto;
        border: 0;
    }

    .corner {
        position: absolute;
        display: inline-block;
        width: 0;
        height: 0;
        line-height: 0;
        border: 0.6em solid transparent;
        border-right: 0.6em solid #f1f1f1;
        border-bottom: 0.6em solid #f1f1f1;
        right: 0em;
        bottom: 0em;
    }

    .file .file-name {
        padding: 10px;
        background-color: #f8f8f8;
        border-top: 1px solid #e7eaec;
        overflow: hidden;
    }

    .checkImg .file::before {
        content: "✔";
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 99;
        background: rgba(0, 0, 0, 0.5);
        color: white;
        font-size: 40px;
        text-align: center;
        line-height: 140px;
    }

    @media (min-width: 576px) {
        .modal-dialog {
            max-width: 80vw !important;
        }
    }

    @media (min-width: 1200px) {
        .modal-dialog {
            max-width: 50vw !important;
        }
    }

    #searchPage {
        border: none;
        overflow: hidden;
        width: 100%;
        height: 100%;
    }

    .modal-content {
        height: 490px;
    }

    .a-upload {
        position: relative;
        display: inline-block;
    }
    .a-upload input {
        position: absolute;
        width: 100%;
        height: 100%;
        right: 0;
        top: 0;
        opacity: 0;
    }

</style>

{/block}

{block name="content"}

<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-group-sm" data-toggle="modal" data-target="#searchModal">搜索</button>
<button class="btn btn-success btn-group-sm a-upload" ><input type="file" id="fileModel"/>上传</button>

<!-- 模态框（Modal） -->
<div class="modal fade" id="searchModal" tabindex="-1" role="dialog" aria-labelledby="searchModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="searchModalLabel">搜索</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
                <iframe src="/backend/attachment/search" id="searchPage" scrolling="no"
                        width="100%"></iframe>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<div class="row">
    <div class="col-sm-12 img-list">
    </div>
</div>
<div id="img-page"></div>

{/block}
{block name="script"}

<script src="/static/backend/js/page.js"></script>
<script>
    // 上下文对象
    var surface_selection = []

    let pageSize = 15

    /**
     * 插入数据
     */
    function insertData(list) {
        let _html = ''
        if (list.length <= 0) {
            _html = "<div class='text-center'>没有更多数据~</div>";
        } else {
            let show = '', images = {$ext | json_encode | raw}

            for (let i of list) {
                if ($.inArray(i.suffix, images) !== -1) {
                    show = `<div class="image"><img alt="image" class="img-responsive" src="${i.url}"></div>`
                } else {
                    show = `<div class="icon"><i class="ri-bill-line"></i></div>`
                }
                let checked = '';
                _html += `<div class="file-box ${checked}" data-url="${i.url}">
                        <div class="file">
                            ${show}
                            <span class="corner"></span>
                            <div class="file-name">
                                <div class="filename" title="${i.name}">${i.name}</div>
                                <small>${i.wh}</small>
                            </div>
                        </div>
                    </div>`
            }
        }
        $('.img-list').html(_html)
        return true
    }

    let query = {limit: pageSize}

    function getData(params = {}, page) {
        for(let i in params) {
            if (params[i]) {
                query[i] = params[i]
            }else{
                delete query[i]
            }
        }
        query.page = page
        let result = $.ajax({
            url: "/backend/attachment/index",
            data: query,
            dataType: "json",
            async: false
        });
        if (result.responseJSON.code === 0) {
            let data = result.responseJSON.data
            showPagination(data.length, pageSize)
            insertData(data.list)
        } else {
            alert(result.msg);
        }
    }

    let pageInit = false

    function showPagination(total) {
        if (pageInit) {
            return
        }
        pageInit = true
        $("#img-page").sPage({
            page: 1,//当前页码，必填
            total: total,//数据总条数，必填
            pageSize: pageSize,//每页显示多少条数据，默认15条
            totalTxt: "",//数据总条数文字描述，{total}为占位符，默认"共{total}条"
            showTotal: false,//是否显示总条数，默认关闭：false
            showSkip: false,//是否显示跳页，默认关闭：false
            showPN: true,//是否显示上下翻页，默认开启：true
            prevPage: "上一页",//上翻页文字描述，默认“上一页”
            nextPage: "下一页",//下翻页文字描述，默认“下一页”
            backFun: function (page) { //点击分页按钮回调函数，返回当前页码
                getData({}, page)
            }
        });
    }

    // 伪造Table组件  实现搜索
    var $surfaceTable = {
            searchChange(data) {
                getData(data, 1)
            },
            hideDialog() {
                $('#searchModal').modal('hide')
            }
        }

    ;(function (w) {
        getData()

        $('#fileModel').on('change', function () {
            let formData = new FormData();
            formData.append("file", document.getElementById("fileModel").files[0]);
            $.ajax({
                url: "/backend/attachment/upload",
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function (data) {
                    $(this).remove()
                    getData()
                },
                error: function () {
                    alert("上传失败！");
                }
            });
        })

        $('.img-list').on('click', '.file-box', function () {
            let url = $(this).data('url')
            if ($(this).hasClass("checkImg")) {
                $(this).removeClass('checkImg')
                surface_selection.splice(surface_selection.indexOf(url), 1)
            } else {
                $(this).addClass('checkImg')
                surface_selection.push(url)
            }
        })

    }(window));

</script>
{/block}
